<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>在线学习</title>
</head>


<body>


    <header>
        <div id="logo">
            <img src="./img/logo.png" alt="logo" title="logo">
        </div>
        <nav id="nav">
            <ul>
                <li>
                    <a href="#">首页</a>
                    <a href="#">课程</a>
                    <a href="#">职业规划</a>
                </li>
            </ul>
        </nav>
        <div id="search">
            <input type="text" placeholder="请输入关键字">
            <a href=""><img src="./img/search.png" alt=""></a>
        </div>
        <div id="face">
            <img src="./img/face.png" alt="">
            <span> <a href="">qq-hmeimei</a></span>
        </div>
    </header>
    <div class="banner">
        <div class="mainav">
            <ul>
                <li><a href="#">前端开发 <span>&gt;</span></a></li>
                <li><a href="#">后端开发 <span>&gt;</span></a></li>
                <li><a href="#">移动开发 <span>&gt;</span></a></li>
                <li><a href="#">人工智能 <span>&gt;</span></a></li>
                <li><a href="#">商业预测 <span>&gt;</span></a></li>
                <li><a href="#">云计算&大数据 <span>&gt;</span></a></li>
                <li><a href="#">运维&从测试 <span>&gt;</span></a></li>
                <li><a href="#">UI设计 <span>&gt;</span></a></li>
                <li><a href="#">产品 <span>&gt;</span></a></li>
            </ul>
            <div class="sidenav">
                <h4>我的课程表</h4>
                <dl>
                    <dt>继续学习 程序语言设计</dt>
                    <dd>正在学习-使用对象</dd>
                </dl>
                <dl>
                    <dt>继续学习 程序语言设计</dt>
                    <dd>正在学习-使用对象</dd>
                </dl>
                <dl>
                    <dt>继续学习 程序语言设计</dt>
                    <dd>正在学习-使用对象</dd>
                </dl>
                <div class="btn"><a href="#">全部课程</a></div>
            </div>

        </div>

    </div>
    <div class="bottomnav">
        <h5>精品推荐</h5>
        <ul>
            <li>
                <a href="#">JQuery</a>
            </li>
            <li>
                <a href="#">Spark</a>
            </li>
            <li>
                <a href="#">MySQL</a>
            </li>
            <li>
                <a href="#">JavaWeb</a>
            </li>
            <li>
                <a href="#">MySQL</a>
            </li>
            <li>
                <a href="#">JavaWeb</a>
            </li>
        </ul>
        <span>修改兴趣</span>
    </div>


</body>

</html>